<template>
    <div class="container">
        <div class="detail">
            <div class="title">
                <span class="title-text" :title="detail.projectName || '--'">{{ detail.projectName || '--' }}</span>
            </div>
            <div class="content-flex">
                <div class="label">月份：</div>
                <div class="value">{{ detail.lostMonth || '--' }}</div>
            </div>
            <div class="content-flex">
                <div class="label">发布链接：</div>
                <div class="value">{{ detail.publishLink || '--' }}</div>
            </div>
            <div class="content-flex">
                <div class="label">发布时间：</div>
                <div class="value">{{ detail.publishTime || '--' }}</div>
            </div>
            <div class="content-flex">
                <div class="label">地市：</div>
                <div class="value">{{ detail.cityName || '--' }}</div>
            </div>
            <div class="content-flex">
                <div class="label">区/县：</div>
                <div class="value">{{ detail.districtName || '--' }}</div>
            </div>
            <div class="content-flex">
                <div class="label">招标人：</div>
                <div class="value">{{ detail.bidder || '--' }}</div>
            </div>
            <div class="content-flex">
                <div class="label">中标金额(万元)：</div>
                <div class="value">{{ detail.bidAmount || '--' }}</div>
            </div>
            <div class="content-flex">
                <div class="label">中标运营商：</div>
                <div class="value">{{ detail.providerType || '--' }}</div>
            </div>
            <div class="content-flex">
                <div class="label">中标企业：</div>
                <div class="value">{{ detail.bidCompany || '--' }}</div>
            </div>
            <div class="content-flex">
                <div class="label">行业：</div>
                <div class="value">{{ detail.industryCounty || '--' }}</div>
            </div>
            <div class="content-flex">
                <div class="label">丢标编码：</div>
                <div class="value">{{ detail.missCode || '--' }}</div>
            </div>
            <div class="content-flex">
                <div class="label">项目归属：</div>
                <div class="value">{{ detail.projectBelonging || '--' }}</div>
            </div>
            <div class="content-flex">
                <div class="label">商机录入系统日期：</div>
                <div class="value">{{ detail.entryDate || '--' }}</div>
            </div>
            <div class="content-flex">
                <div class="label">全网商机编码：</div>
                <div class="value">{{ detail.busiOpportunityNumber || '--' }}</div>
            </div>
            <div class="content-flex">
                <div class="label">投标情况：</div>
                <div class="value">{{ detail.bidSituation || '--' }}</div>
            </div>
            <div class="content-flex">
                <div class="label">是否中标友商前期存量项目：</div>
                <div class="value">{{ detail.stockFlag || '--' }}</div>
            </div>
            <div class="content-flex">
                <div class="label">涉及标准产品：</div>
                <div class="value">{{ detail.relatedProduct || '--' }}</div>
            </div>
            <div class="content-flex">
                <div class="label">涉及解决方案：</div>
                <div class="value">{{ detail.relatedProposal || '--' }}</div>
            </div>
            <div class="content-flex">
                <div class="label">移动内部专业公司支撑：</div>
                <div class="value">{{ detail.professionalCompany || '--' }}</div>
            </div>
            <div class="content-flex">
                <div class="label">专业公司未支撑原因：</div>
                <div class="value">{{ detail.unsupportedCause || '--' }}</div>
            </div>
            <div class="content-flex">
                <div class="label">专业公司支撑是否有不足：</div>
                <div class="value">{{ detail.lackFlag || '--' }}</div>
            </div>
            <div class="content-flex">
                <div class="label">对专业公司的意见点：</div>
                <div class="value">{{ detail.suggestionName || '--' }}</div>
            </div>
            <div class="content">
                <div class="label">前期走访及其它动作：</div>
                <div class="value" v-html="getTextToBr(detail.actionProgress)"></div>
            </div>
            <div class="content">
                <div class="label">标书得分对标分析：</div>
                <div class="value" v-html="getTextToBr(detail.scoreAnalysis)"></div>
            </div>
            <div class="content">
                <div class="label">丢标原因说明：</div>
                <div class="value" v-html="getTextToBr(detail.missExplanation)"></div>
            </div>
            <div class="content-flex">
                <div class="label">一级原因：</div>
                <div class="value">{{ getNameText('secondList', detail.firstCause) }}</div>
            </div>
            <div class="content-flex">
                <div class="label">二级原因：</div>
                <div class="value">{{ getNameText('secondCase', detail.secondCause) }}</div>
            </div>
            <div class="content">
                <div class="label">备注说明：</div>
                <div class="value">{{ detail.addRemark || '--' }}</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'loseBidDetail',
    data() {
        return {
            detail: this.$route.query,
            secondList: [],
            secondCase:[]
        }
    },
    created() {
        selectByLostLabel({ dataType: 'causeTree' }).then(res => {
            this.secondList = res || []
            this.changeFirstCase(this.detail.firstCause)
        })
    },
    methods: {
         getNameText(typeName, code) {
            let find = this[typeName].find(item => item.code == code || item.value == code)
            return find && (find.name || find.label) ? find.name || find.label : ''
        },
        changeFirstCase(val) {
            let list = this.secondList.find(item => item.value === val)?.children || []
            this.secondCase = list
        },
        getTextToBr(text) {
            return text ? text.replace(/\n/g, '<br />') : '--'
        },
    }
}
</script>
<style lang="scss" scoped>
.container {
    height: calc(100vh - 84px);
    width: 100%;
    padding: 16px;
    position: relative;
    background: #f3f6fb;
    overflow-y: auto;
}

.detail {
    overflow: hidden;
    background: #fff;
    padding: 16px;
    border-radius: 7px;
    height: calc(100vh - 116px);
    overflow-y: auto;
}

.title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 5px;
    position: relative;

    .title-text {
        max-width: calc(100% - 225px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
    }
}

.content-flex {
    display: flex;
    font-size: 14px;
    line-height: 26px;
    margin-right: 20px;
    float: left;
    min-width: calc(25% - 20px);
}

.label {
    color: #333;
    min-width: 40px;
    font-weight: bold;
}

.value {
    color: #555;
}

.content {
    display: flex;
    font-size: 14px;
    line-height: 26px;
    width: 100%;
    flex-wrap: wrap;
}
</style>